<template>
	<view class="photo-manager-container">
		
		
		<scroll-view class="content-scroll" scroll-y>
			<!-- 现场照片 -->
			<view class="photo-section">
				<view class="section-header">
					<!-- <text class="section-title">现场照片</text> -->
					<!-- <text class="section-desc">需上传 {{ minScenePhotos }}-{{ maxScenePhotos }} 张</text> -->
				</view>
				<view class="photo-card">
					<view class="photo-header">
						<text class="photo-title">现场环境凭证</text>
						<text class="photo-desc">请上传现场环境照片，需保持清晰完整</text>
					</view>
					<view class="photo-grid">
						<view class="photo-item" v-for="(photo, index) in scenePhotos" :key="photo">
							<image class="photo-image" :src="photo" mode="aspectFill" @click="previewPhoto('scene', index)" />
							<view class="photo-delete" @click.stop="removePhoto('scene', index)">
								<text class="delete-icon">×</text>
							</view>
						</view>
						<view class="photo-item upload" v-if="scenePhotos.length < maxScenePhotos" @click="choosePhotos('scene')">
							<view class="upload-icon">
								<text class="camera-icon">📷</text>
							</view>
							<text class="upload-text">添加照片</text>
							<text class="upload-sub">需{{ minScenePhotos }}-{{ maxScenePhotos }}张</text>
						</view>
					</view>
					<text class="photo-tip">已选 {{ scenePhotos.length }} 张，至少 {{ minScenePhotos }} 张</text>
				</view>
			</view>

			<!-- 单据照片 -->
			<view class="photo-section">
				<view class="section-header">
					<!-- <text class="section-title">单据照片</text> -->
					<!-- <text class="section-desc">需上传 {{ minBillPhotos }}-{{ maxBillPhotos }} 张</text> -->
				</view>
				<view class="photo-card">
					<view class="photo-header">
						<text class="photo-title">单据凭证材料</text>
						<text class="photo-desc">请上传单据凭证照片，需保持清晰完整</text>
					</view>
					<view class="photo-grid">
						<view class="photo-item" v-for="(photo, index) in billPhotos" :key="photo">
							<image class="photo-image" :src="photo" mode="aspectFill" @click="previewPhoto('bill', index)" />
							<view class="photo-delete" @click.stop="removePhoto('bill', index)">
								<text class="delete-icon">×</text>
							</view>
						</view>
						<view class="photo-item upload" v-if="billPhotos.length < maxBillPhotos" @click="choosePhotos('bill')">
							<view class="upload-icon">
								<text class="camera-icon">📷</text>
							</view>
							<text class="upload-text">添加照片</text>
							<text class="upload-sub">需{{ minBillPhotos }}-{{ maxBillPhotos }}张</text>
						</view>
					</view>
					<text class="photo-tip">已选 {{ billPhotos.length }} 张，至少 {{ minBillPhotos }} 张</text>
				</view>
			</view>
		</scroll-view>
		
		<!-- 保存按钮 -->
		<button class="save-btn" :class="{ 'disabled': saving }" :disabled="saving" @click="savePhotos">
			{{ saving ? '保存中...' : '保存照片' }}
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scenePhotos: [],
				billPhotos: [],
				minScenePhotos: 1,
				maxScenePhotos: 5,
				minBillPhotos: 1,
				maxBillPhotos: 5,
				saving: false
			}
		},
		onLoad() {
			this.loadPhotos()
		},
		onShow() {
			// 页面显示时重新加载照片，确保数据同步
			this.loadPhotos()
		},
		computed: {
			canSave() {
				return this.scenePhotos.length >= this.minScenePhotos && 
					   this.billPhotos.length >= this.minBillPhotos
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			
			/**
			 * 保存照片
			 */
			savePhotos() {
				if (this.saving) return
				
				// 验证照片数量
				if (this.scenePhotos.length < this.minScenePhotos) {
					uni.showToast({
						title: `现场照片至少上传${this.minScenePhotos}张`,
						icon: 'none'
					})
					return
				}
				
				if (this.billPhotos.length < this.minBillPhotos) {
					uni.showToast({
						title: `单据照片至少上传${this.minBillPhotos}张`,
						icon: 'none'
					})
					return
				}
				
				this.saving = true
				
				// 保存照片到本地存储
				uni.setStorageSync('pondScenePhotos', this.scenePhotos)
				uni.setStorageSync('pondBillPhotos', this.billPhotos)
				
				// 模拟保存过程
				setTimeout(() => {
					this.saving = false
					uni.showToast({
						title: '照片保存成功',
						icon: 'success'
					})
					
					// 返回上一页
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}, 1000)
			},
			
			/**
			 * 加载照片数据
			 */
			loadPhotos() {
				const savedScene = uni.getStorageSync('pondScenePhotos') || []
				const savedBill = uni.getStorageSync('pondBillPhotos') || []
				this.scenePhotos = Array.isArray(savedScene) ? savedScene : []
				this.billPhotos = Array.isArray(savedBill) ? savedBill : []
			},
			
			/**
			 * 选择照片
			 */
			choosePhotos(type) {
				const config = this.getPhotoConfig(type)
				const targetList = type === 'scene' ? this.scenePhotos : this.billPhotos
				const remaining = config.max - targetList.length
				
				if (remaining <= 0) {
					uni.showToast({
						title: `最多上传${config.max}张照片`,
						icon: 'none'
					})
					return
				}
				
				uni.chooseImage({
					count: remaining,
					sizeType: ['compressed'],
					success: (res) => {
						const merged = [...targetList, ...res.tempFilePaths]
						const newList = merged.slice(0, config.max)
						
						if (type === 'scene') {
							this.scenePhotos = newList
						} else {
							this.billPhotos = newList
						}
						
						// 自动保存到本地存储
						uni.setStorageSync('pondScenePhotos', this.scenePhotos)
						uni.setStorageSync('pondBillPhotos', this.billPhotos)
						
						uni.showToast({
							title: '照片添加成功',
							icon: 'success'
						})
					}
				})
			},
			
			/**
			 * 预览照片
			 */
			previewPhoto(type, index) {
				const list = type === 'scene' ? this.scenePhotos : this.billPhotos
				if (!list.length) return
				
				uni.previewImage({
					current: list[index],
					urls: list
				})
			},
			
			/**
			 * 删除照片
			 */
			removePhoto(type, index) {
				uni.showModal({
					title: '提示',
					content: '确认删除该照片吗？',
					success: (res) => {
						if (res.confirm) {
							if (type === 'scene') {
								this.scenePhotos.splice(index, 1)
								uni.setStorageSync('pondScenePhotos', this.scenePhotos)
							} else {
								this.billPhotos.splice(index, 1)
								uni.setStorageSync('pondBillPhotos', this.billPhotos)
							}
							
							uni.showToast({
								title: '照片已删除',
								icon: 'success'
							})
						}
					}
				})
			},
			
			/**
			 * 获取照片配置
			 */
			getPhotoConfig(type) {
				if (type === 'scene') {
					return { min: this.minScenePhotos, max: this.maxScenePhotos }
				} else {
					return { min: this.minBillPhotos, max: this.maxBillPhotos }
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/uni.scss';

	.photo-manager-container {
		background: $bg-secondary;
		min-height: 100vh;
		position: relative;
		padding-top: 0;
		box-sizing: border-box;
	}

	/* 自定义导航栏 */
	.custom-navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: calc(88rpx + env(safe-area-inset-top));
		background: $bg-primary;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		padding-top: env(safe-area-inset-top);
		z-index: 1000;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
		border-bottom: 1rpx solid $border-light;
	}

	.navbar-back {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: $radius-md;
		transition: all 0.3s ease;
	}

	.navbar-back:active {
		background: $bg-secondary;
		transform: scale(0.95);
	}

	.back-icon {
		font-size: 48rpx;
		color: $text-primary;
		font-weight: 300;
		line-height: 1;
	}

	.navbar-title {
		font-size: $font-lg;
		font-weight: 600;
		color: $text-primary;
		flex: 1;
		text-align: center;
	}

	.navbar-placeholder {
		width: 60rpx;
	}

	.content-scroll {
		padding: 20rpx 32rpx 140rpx;
		// padding-top: calc(88rpx + env(safe-area-inset-top) + 20rpx);
		box-sizing: border-box;
	}

	.photo-section {
		margin-bottom: 32rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
		padding: 0 4rpx;
	}

	.section-title {
		font-size: $font-lg;
		font-weight: 600;
		color: $text-primary;
	}

	.section-desc {
		font-size: $font-sm;
		color: $text-tertiary;
	}

	.photo-card {
		background: $bg-primary;
		border-radius: $radius-lg;
		border: 1rpx solid $border-light;
		box-shadow: $shadow-md;
		padding: 28rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.photo-header {
		display: flex;
		flex-direction: column;
		gap: 6rpx;
	}

	.photo-title {
		font-size: $font-lg;
		font-weight: 600;
		color: $text-primary;
	}

	.photo-desc {
		font-size: $font-sm;
		color: $text-secondary;
	}

	.photo-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
	}

	.photo-item {
		position: relative;
		border-radius: $radius-md;
		border: 2rpx solid $border-light;
		background: $bg-primary;
		box-shadow: $shadow-sm;
		overflow: hidden;
		aspect-ratio: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
	}

	.photo-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.photo-delete {
		position: absolute;
		top: 8rpx;
		right: 8rpx;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.55);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
	}

	.photo-delete:active {
		background: rgba(0, 0, 0, 0.7);
		transform: scale(0.9);
	}

	.delete-icon {
		font-size: 28rpx;
		color: $text-white;
		line-height: 1;
		font-weight: 300;
	}

	.photo-item.upload {
		border-style: dashed;
		border-color: rgba(51, 136, 255, 0.35);
		background: rgba(51, 136, 255, 0.05);
		flex-direction: column;
		gap: 10rpx;
	}

	.photo-item.upload:active {
		background: rgba(51, 136, 255, 0.12);
		border-color: $primary;
	}

	.upload-icon {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		background: rgba(51, 136, 255, 0.12);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.camera-icon {
		font-size: 36rpx;
	}

	.upload-text {
		font-size: $font-sm;
		color: $primary;
		font-weight: 600;
	}

	.upload-sub {
		font-size: 22rpx;
		color: $text-tertiary;
	}

	.photo-tip {
		font-size: 24rpx;
		color: $text-tertiary;
		text-align: center;
	}

	/* 保存按钮 */
	.save-btn {
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100% - 60rpx);
		max-width: 660rpx;
		height: 88rpx;
		background: linear-gradient(135deg, $primary 0%, $primary-light 100%);
		color: $text-white;
		border: none;
		border-radius: $radius-xl;
		font-size: $font-lg;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: $shadow-lg;
		transition: all 0.3s ease;
		z-index: 10;
	}

	.save-btn:active {
		transform: translateX(-50%);
		box-shadow: $shadow-md;
	}

	.save-btn:disabled {
		background: $text-disabled;
		color: $text-white;
		transform: none;
		box-shadow: none;
		opacity: 0.6;
	}

	@media screen and (max-width: 600rpx) {
		.photo-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}
</style>